// EditModal.tsx
import React from 'react';
import { Button, Modal, Input } from 'antd';
import { useState } from 'react';

interface EditModalState {
    visible: boolean;
    input1: string;
    input2: string;
}

function useEditModal() {
    const [state, setState] = useState<EditModalState>({ visible: false, input1: '', input2: '' });

    const showModal = () => {
        setState({ ...state, visible: true });
    };

    const handleCancel = () => {
        setState({ ...state, visible: false });
    };

    const handleConfirm = () => {
        if (state.input1 && state.input2) {
            alert('修改成功');
            setState({ visible: false, input1: '', input2: '' });
        } else {
            alert('请输入所有内容');
        }
    };

    const handleInputChange1 = (e: React.ChangeEvent<HTMLInputElement>) => {
        setState({ ...state, input1: e.target.value });
    };

    const handleInputChange2 = (e: React.ChangeEvent<HTMLInputElement>) => {
        setState({ ...state, input2: e.target.value });
    };

    return { ...state, showModal, handleCancel, handleConfirm, handleInputChange1, handleInputChange2 };
}

const EditModal: React.FC = () => {
    const { visible, input1, input2, showModal, handleCancel, handleConfirm, handleInputChange1, handleInputChange2 } = useEditModal();

    return (
        <div>
            <Button type="text" style={{color:"blue"}} onClick={showModal}>
                修改
            </Button>
            <Modal
                title="请输入修改内容"
                visible={visible}
                onOk={handleConfirm}
                onCancel={handleCancel}
                okText="确认修改"
            >
                <Input
                    placeholder="请输入修改后的标准名称"
                    value={input1}
                    onChange={handleInputChange1}
                    style={{ marginBottom: 10 }}
                />
                <Input
                    placeholder="请输入修改后的标准编号"
                    value={input2}
                    onChange={handleInputChange2}
                    style={{ marginBottom: 10 }}
                />
            </Modal>
        </div>
    );
};

export default EditModal;